Навигация между экранами

➡️Ссылка на репозиторий с кодом этого урока

Подготовка

Создаём новый flutter проект под названием flutter_navigation

Внутри папки lib добавим папку screens, где будут находится экраны приложения

В папке screens добавим 4 файла, которые являются отдельными экранами в приложении

• main_screen.dart
• first_screen.dart
• second_screen.dart
• third_screen.dart

Flutter Навигация

Навигация - это механизм, который позволяет перемещаться между экранами приложения. Самый простой способ реализовать навигацию — использовать класс Navigator.

Экран во Flutter называется route

Как называть экраны во Flutter?

Наиболее часто экраны называют 3 способами Screen Page Route

Например, MainScreen или MainPage или MainRoute

Выбирайте вариант, который вам понравился больше всего и придерживайтесь его во всех файлах проекта.

Файл main.dart

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Навигация в Flutter',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
      ),
      home: const MainScreen(),
    );
  }
}

                  

Файл main_screen.dart

import 'package:flutter/material.dart';

class MainScreen extends StatelessWidget {
  const MainScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Главный экран'),
      ),
      backgroundColor: Colors.white,
      body: SizedBox(
        width: double.infinity,
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () { },
                child: const Text("Открыть первый экран"),
              ),
            ],
          ),
      ),
    );
  }
}

                  

Файл first_screen.dart

import 'package:flutter/material.dart';

class FirstScreen extends StatelessWidget {
  const FirstScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Первый экран'),
        backgroundColor: Colors.green[300],
      ),
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Color(0xFFBFF098), Color(0xFF6FD6FF)],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        child: SizedBox(
          width: double.infinity,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {},
                child: const Text("Открыть 2й экран"),
              ),
              ElevatedButton(
                onPressed: () {},
                child: const Text("Вернуться назад"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

                  

Чтобы перейти с экрана MainScreen на экран FirstScreen, нужно использовать метод класса Navigator под названием push()

Разработчики фреймворка Flutter называют экраны роутами (route), поэтому можно часто встретить такие названия в виджетах навигации.

Таким способом происходит переход на экран FirstScreet

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (BuildContext context) => FirstScreen(),
  ),
);

                  

Добавим этот код в обработчик нажатия на кнопку в файле main_screen.dart

Файл main_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_navigation/screens/first_screen.dart';

class MainScreen extends StatelessWidget {
  const MainScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Главный экран'),
        centerTitle: true,
      ),
      backgroundColor: Colors.white,
      body: SizedBox(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (BuildContext context) => FirstScreen(),
                  ),
                );
              },
              child: const Text("Открыть FirstScreen"),
            ),
          ],
        ),
      ),
    );
  }
}

                  

Чтобы вернуться на предыдущий экран с которого был переход на текущий, используем метод Navigator.pop(context)

ElevatedButton(
  onPressed: () => Navigator.pop(context),
  child: const Text("Вернуться Назад"),
),

                  

Для простой навигации в приложении достаточно всего двух этих методов

• Navigator.push() для перехода на новый экран
• Navigator.pop() для возврата на предыдущий